<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="(item,i) in swiperList" key="i">
				<navigator class="swiper-item" ><img :src="item.address" ></navigator>
			</swiper-item>
		</swiper>
		<view class="list">知名店铺</view>
			<navigator v-for="(item,i) in dianList" key="i" :url="'/subpage/goods/goods?id='+item.id+'&goods_from='+item.name" class="dian">
				<view class="tu">
				<image :src="item.address"></image>
				</view>
				<view class="info">
					<text class="name">{{item.name}}</text> 
				<text>地址：{{item.location}}</text> 
				<text>电话：{{item.tel}}</text> 
				<text>描述：{{item.escribe}}</text> 
				</view>
				
			</navigator>
			<button class="dao" type="primary" @click="daohang">导航</button>
			
	</view>
</template>

<script>
	import badgeMax from '@/mixins/tarbar.js'
	import {mapMutations} from 'vuex'
	
	export default {
		mixins:[badgeMax],
		computed:{
		
		},
		data() {
			return {
				swiperList:[],
				dianList:[],
			};
		},
		onLoad() {
			//调用方法获取轮播图数据
			this.getSwiperList();
			this.getDianList();
		},
		methods: {
			...mapMutations('m-map',['update']),
			async getSwiperList(){
			const  res=await uni.$http.get('http://localhost:8020/photo')
			if(res.statusCode!=200){
				return uni.$showMsg()
			}
			this.swiperList= res.data
			uni.$showMsg('数据请求成功')
			},
			async getDianList(){
				const  res=await uni.$http.get('http://localhost:8020/dian')
				if(res.statusCode!=200){
					return uni.$showMsg()
				}
				this.dianList= res.data
				uni.$showMsg('数据请求成功')
			},
			daohang(){
				wx.chooseLocation({
					success:(res)=>{
						this.update(res.latitude,res.longitude,res.name)
						uni.redirectTo({
							url:'/pages/map/map'
						})
					}
				})
			}
			},
		}
</script>

<style lang="scss">
swiper{
	height: 400rpx;
	.swiper-item,
	image{
		width:100%;
		height: 100%;
	}
}
.list{
	font-size: 50rpx;
	color: red;
}
.dian{
	display: flex;
	padding: 15rpx;
	border: 1rpx solid #efefef;
	border-radius: 8%;
	margin: 15rpx;
	.dao{
		height: 100px;
		width: 100px;
		
	}
}
.tu image{
	width: 250rpx;
	height: 250rpx;
	display: block;
	margin-right: 15rpx;
}
.info{
	display: flex;
	flex-direction: column;//纵向布局
	justify-content: space-around;//纵向上分散对齐
	font-size: 24rpx;
}
.name{
	font-weight: bold;
}
</style>
